// Copyright 2011 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/*
 * @fileoverview Templates for dialogs in the RPF console.
 *
 * @author ralphj@google.com (Julie Ralph)
 * @author jasonstredwick@google.com (Jason Stredwick)
 */


{namespace rpf.soy.Dialog}


/**
 * Creates the content for the export project dialog.
 */
{template .exportContent}
<div id="export-root" class="export-content-canvas">
  <div id="project-details-tab" class="goog-tab-bar">
    <div class="goog-tab goog-tab-selected" id="project-details-export">
      Export
    </div>
    <div class="goog-tab" id="project-details-import">
      Import
    </div>
    <div class="goog-tab" id="project-details-tests">
      Scripts
    </div>
  </div>
  <div class="goog-tab-bar-clear">

  </div>
  <div class="goog-tab-content" id="project-details-content">
    <div id="project-details-export-content"
         class="project-details-content-tab">
      <table style="width:100%">
        <!-- The interface for managing the url/page map. -->
        <tr>
          <td>
            <h3 class="componentName">
              Class Mapping
            </h3>
            <div class="export-data" style="max-height:350px;overflow-y:auto;">
              <table style="width:100%">
                <thead>
                  <tr>
                    <th style="width:70%" class="export-table-data">
                      Url (substring match)
                    </th>
                    <th style="width:20%" class="export-table-data">
                      Class Name
                    </th>
                    <th style="text-align:right;">
                      <img id="export-add-class" width="18" height="18"
                           src="imgs/rpf/plus.png">
                    </th>
                  </tr>
                </thead>
                <tbody id="export-page-table-body">
                </tbody>
              </table>
            </div>
          </td>
        </tr>

        <!-- Java specific information. -->
        <tr>
          <td>
            <h3 class="componentName">
              Java Configuration
            </h3>
            <div>
              <table style="width:100%">
                <tr>
                  <td class="export-label">
                    Package Path
                  </td>
                  <td>
                    <input id="export-java-package-path" type="text"
                           style="width:100%">
                  </td>
                </tr>
                <tr>
                  <td class="export-label">
                    Interval in ms
                  </td>
                  <td>
                    <input id="export-java-interval" type="text"
                           style="width:100%">
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
      <div id="export-button-save" value="Save" style="float:left;"
           title="Save project details."></div>

      <div id="export-button-export" value="Export"
           title="Export the project to your client."></div>
    </div>
    <div id="project-details-import-content" style="visible:hidden;"
         class="project-details-content-tab">
      <h3 class="componentName">
        Package Path
      </h3>
      <input id="import-java-package-path" type="text" style="width:100%">
      <div id="export-button-import" value="Import"
           title="Load data.rpf from disk using package path."
           style="padding-top:6px;"></div>
    </div>
    <div id="project-details-tests-content" style="visible:hidden;"
         class="project-details-content-tab">
      <h3 class="componentName">
        Scripts
      </h3>
      <div id="export-test-data" class="export-data">
      </div>
      <div id="delete-tests-button">
      </div>
    </div>
  </div>
</div>
{/template}


/**
 * Generate the table of tests; one test per line.
 * @param tests
 */
{template .getTests}
<select id="project-details-tests-selector" multiple="multiple"
        style="height:250px" class="console-loaddialog-content-table-select">
  {foreach $test in $tests}
  <option value="{$test}" title="">{$test}</option>
  {/foreach}
</select>
{/template}


/**
 * Generate the table of url to page maps; one mapping per line.
 * @param url
 * @param name
 */
{template .getPageMap}
<table>
  <tr id="export-page-map-row">
    <td>
      <input style="width:100%;border:0;" type="text" value="{$url}">
    </td>
    <td>
      <input style="width:100%;border:0;" type="text" value="{$name}">
    </td>
    <td style="text-align:right;">
      <img id="export-page-map-close" width="18" height="18"
           src="imgs/rpf/dialog_close_box.gif">
    </td>
  </tr>
</table>
{/template}


/**
 * Creates the dropdown button.
 */
{template .getDropdownBtn}
<img src="imgs/rpf/downbtn.png">
{/template}


/**
 * Creates the play dialog main content.
 */
{template .playContent}
<div class="rpf-left-panel" id="rpf-multiple-test-selector">
  <select id="playdialog-tests" multiple="multiple"
          style="height:150px; width:150px;"
          class="console-loaddialog-content-table-select">
  </select>
  <div id="rpf-multiple-tests-info">
    <span id="finishedTestsNumber"></span>
    <span id="totalRunningTestsNumber"></span>
    <input type="image" src="imgs/rpf/dialog_close_box.gif" id="stopAllTests"
           title="Stop the current run" value="Stop All" />
  </div>
</div>
<div class="rpf-right-panel">
  <div id="playbackruntime">
    <input type="image" src="imgs/rpf/playall.png" id="playall">
    <input type="image" src="imgs/rpf/pause-disabled.png" id="playpause">
    <input type="image" src="imgs/rpf/playstep.png" id="playstep">
    <input type="image" src="imgs/rpf/playstop.png" id="playstop">
    <div id="playbackcurrentstepdiv" style="padding-top:10px;">
      <input type="text" placeholder="pause at line #"
             id="playbackcurrentstep" size="10" />
    </div>
  </div>
  <div id="playbackstatus"></div>
  <div id="matchHtmlDiv"></div>
  <div id="choiceset" style="padding-top:10px;"></div>
</div>
{/template}


/**
 * Create the settings dialog main content.
 */
{template .settingsContent}
    <ul>
      <li style="padding-bottom: 5px">
        <label for="playbackinterval"
               title="The interval that RPF tries to execute a command.">
          Playback Interval (seconds)
        </label>
        <input type="text" id="playbackinterval" />
        <input type="button" value="ok" id="playbackintervalbutton"
               title="Sets the interval that RPF tries to execute a command." />
      </li>
      <li style="padding-bottom: 5px">
        <label for="defaulttimeout"
               title="The default timeout for URL redirections in playback.">
          Redirection timeout (seconds)
        </label>
        <input type="text" id="defaulttimeout" />
        <input type="button" value="ok" id="defaulttimeoutbutton"
               title="Sets the default timeout for URL redirections." />
      </li>
      <li style="padding-bottom: 5px">
        <label for="whetherUseXpath" title="Takes screenshot during recording.">
          Take screenshot
        </label>
        <input type="checkbox" id="whethertakescreenshot" />
      </li>
      <li style="padding-bottom: 5px">
        <label for="whetherUseXpath"
               title="Use xpath or attributes to locate elements.">
           Use xpath
        </label>
        <input type="checkbox" id="whetherUseXpath" />
      </li>
      <li>
        <label for="whetherShowTips"
               title="Shows the tips.">Show tips</label>
        <input type="checkbox" id="whetherShowTips" />
      </li>
    </ul>
{/template}


/**
 * Creates the JS function dialog main content.
 */
{template .jsContent}
  <div id="rpf-console-js-functions-toolbar" class="console-toolbar">
    <div id="rpf-js-play-button"
         title="Runs all the following code in the target page as content scripts."
         class="console-menu-button rpf-js-function-toolbar-button">
      Play
    </div>
    <div id="rpf-js-generate-button"
         title="Generates an invocation to a function defined here."
         class="console-menu-button rpf-js-function-toolbar-button">
      Generate
    </div>
    <div id="rpf-js-store-button"
         title="Opens the Method Store page to leverage common methods."
         class="console-menu-button rpf-js-function-toolbar-button">
      Store
    </div>
    <div id="rpf-js-deps-button"
         title="Views the dependent common methods of the current project."
         class="console-menu-button rpf-js-function-toolbar-button">
      Dependency
    </div>
  </div>
  <div id="rpf-console-js-functions">
  </div>
{/template}


/**
 * Create the save dialog main content.
 * @param lastProject
 */
{template .saveContent}
  <form>
    <fieldset>
    <legend>Test Information</legend>
    <ul>
      <li>
        <label for="projectName">Project</label>
        <input type="text" name="projectName" id="projectName"
               value="{$lastProject}" autocomplete="off" />
      </li>
      <li>
        <label for="projectName">Test Name</label>
        <input type="text" name="testName" id="testName" />
      </li>
    </ul>
    <legend>Location</legend>
    <ul>
      <li>
        <input type="radio" name="saveLocation" id="localBox">
        <label for="localBox">
          <span>Local</span>
          <span class="option-note"> (your browser's local storage)</span>
        </label>
      </li>
      <li>
        <input type="radio" name="saveLocation" id="webBox" checked>
        <label for="webBox">
          <span>Web</span>
          <span class="option-note"> (the cloud for sharing)</span>
        </label>
      </li>
    </ul>
    </fieldset>
  </form>
{/template}


/**
 * Create the screenshot dialog main content.
 * @param screenshots
 */
{template .screenshotContent}
  <div id="rpf-screenshots" class="centered-div">
    {foreach $screenshotUrl in $screenshots}
    <a href="{$screenshotUrl}" target="_blank">
      <img src="{$screenshotUrl}" width="80%">
    </a>
    <hr />
    {/foreach}
  </div>
{/template}


/**
 * Create the details dialog main content.
 * @param line
 * @param? screenSrc
 */
{template .detailsContent}
<div id="rpf-details-toolbar" class="centered-div">
</div>
<hr>
<div class="centered-div">
  <img src="imgs/rpf/prevpage.png" title="Previous line" id="rpf-prev-line">
  <input type="text" size="1" id="curlineInput" value="{$line}">
  <img src="imgs/rpf/nextpage.png" title="Next line" id="rpf-next-line">
</div>
<div id="rpf-details-screenshot" class="centered-div">
  {if $screenSrc}
    <a href="{$screenSrc}" target="_blank">
      <img src="{$screenSrc}" width="80%">
    </a>
  {/if}
</div>
<div id="rpf-details-editor">
</div>
<div id="rpf-details-moreinfo"
     style="border-top:1px solid #D5D5D5;margin-top:6px;padding-top:6px;">
  <h3 class="componentName">More Info</h3>
  <table>
    <tr>
      <td><label for="stepNameInput">Step name</label></td>
      <td><input type="text" id="stepNameInput" name="stepNameInput"></td>
      <td><div id="saveStepName"></div>
    </tr>
    <tr>
      <td><label for="classNameInput">Class name</label></td>
      <td><input type="text" id="classNameInput" name="classNameInput"></td>
      <td><div id="saveClassName"></div>
    </tr>
  </table>
</div>
{/template}


/**
 * Creates the runs and results links.
 * @param links
 */
{template .createRunsAndResultsLinks}
  <div>
    <a href="{$links['runsUrl']}" target="_blank">Runs</a>
    {sp}&{sp}
    <a href="{$links['resultUrl']}" target="_blank">Results</a>
  </div>
{/template}


/**
 * Creates the validation main UI.
 */
{template .createValidationDialog}
  <div id="action-name-in-validation-dialog">
  </div>
  <div id="choiceViewDiv">
  </div>
{/template}


/**
 * Creates the action names div.
 */
{template .createActionNames}
  <h3 class="componentName">Action</h3>
  <div id="actions-select" style="text-align: center;"></div>
{/template}


/**
 * Creates the alert box.
 */
{template .createAlert}
  <div id="rpf-alert-box" class="kd-bubble alert">
    <p id="rpf-alert-box-text"></p>
    <p class="links">
      <a id="rpf-alert-box-more" href="#" target="_blank">Learn More</a>
      {sp}|{sp}
      <a id="rpf-alert-box-dismiss" href="#">Dismiss</a>
      {sp}|{sp}
      <a id="rpf-alert-box-never" href="#">Never Show</a>
    </p>
  </div>
{/template}


/**
 * Creates the input dialog.
 */
{template .createInputDialog}
  <div class="kd-modaldialog visible kd-prompt rpf-input-dialog"
       id="rpf-input-dialog-project-name">
    <p>
      <label for="label">Please enter a new name</label>
      <input type="text" id="new-name-input-project">
    </p>
    <div class="kd-formbuttons">
      <a class="kd-button kd-button-submit primary"
         style="-webkit-user-select: none; "
         id="new-name-submit-project">OK</a>
      <a class="kd-button" style="-webkit-user-select: none;"
         id="new-name-cancel-project">Cancel</a>
    </div>
  </div>

  <div class="kd-modaldialog visible kd-prompt rpf-input-dialog"
       id="rpf-input-dialog-script-name">
    <p>
      <label for="label">Please enter a new name</label>
      <input type="text" id="new-name-input-script">
    </p>
    <div class="kd-formbuttons">
      <a class="kd-button kd-button-submit primary"
         style="-webkit-user-select: none; "
         id="new-name-submit-script">OK</a>
      <a class="kd-button" style="-webkit-user-select: none;"
         id="new-name-cancel-script">Cancel</a>
    </div>
  </div>

  <div class="kd-modaldialog visible kd-prompt rpf-input-dialog"
       id="rpf-input-dialog-generate-method">
    <p>
      <label for="label">Please enter a method name</label>
      <input type="text" id="method-name-input"
             placeholder="ex. verifyNameAndAge">
    </p>
    <p>
      <label for="label">Please enter the parameters string</label>
      <input type="text" id="method-parameter-input"
             placeholder="ex. 'Google', 14">
    </p>
    <p>
      <label for="label">
        Is the method asynchronous?
      </label>
      <input type="radio" name="method-asynchronous"
             style="margin-right:8px">
      Yes
      <input type="radio" name="method-asynchronous"
             id="method-is-synchronous"
             style="margin-left:8px;margin-right:8px" checked>
      No
    </p>
    <div class="kd-formbuttons">
      <a class="kd-button kd-button-submit primary"
         style="-webkit-user-select: none; "
         id="generate-invocation-submit">OK</a>
      <a class="kd-button" style="-webkit-user-select: none;"
         id="generate-invocation-cancel">Cancel</a>
    </div>
  </div>

  <div class="kd-modaldialog visible kd-prompt rpf-input-dialog"
       id="rpf-input-dialog-deps-string">
    <p>
      <label for="label">The current dependency names string (only work for projects stored in web)</label>
      <input type="text" id="methods-deps-input"
             placeholder="a, b, c (comma-separated)">
      <div style="color:#999;font-size:13px;word-wrap:break-word;">
        If you'd like to manually modify the dependency string, you'd need to
         save the script to take effect. It's recommeded using the "Add to RPF"
          feature in store which automatically handles dependency for you. Please
          note that if you load a project before saving, it will lose the unsaved
          string.
      </div>
    </p>
  </div>

  <div class="kd-modaldialog visible kd-prompt rpf-input-dialog"
       id="rpf-input-dialog-discard">
    <p>
      <label for="label">
        Are you sure to discard the script and continue loading?
      </label>
    </p>
    <div class="kd-formbuttons">
      <a class="kd-button kd-button-submit primary"
         style="-webkit-user-select: none; "
         id="save-script-submit">Continue</a>
      <a class="kd-button" style="-webkit-user-select: none;"
         id="save-script-cancel">Cancel</a>
    </div>
  </div>

  <div class="kd-modaldialog visible kd-prompt rpf-input-dialog"
       id="rpf-input-dialog-close-record">
    <p>
      <label for="label">
        Chrome reported that the tab under record was closed. If you would like
        to continue recording, you'll need to select/prepare a tab and then
        click the "record and playback" option in extension popup to mark it as
        the new tab under record.
      </label>
    </p>
  </div>
{/template}

